import React, { Component } from 'react'

export default class App extends Component {

    // 通过 bind 传值，接收的时候前面是传递过来的参数,后面是 event 事件对象
    add = function(val,event){
        console.log('事件传参 1', val, event);
    }

    reduce = (val)=>{
        console.log('事件传参 2', val);
    }

  render() {
    return (
      <div>
        <button onClick={this.add.bind(this, 10)}>事件传参 1  ----- 可以使用传值 </button>

        <button onClick={this.reduce(8)}>事件传参 2 ----- 不能传参</button>

        <button onClick={()=>{
            this.reduce(8)
        }}>事件传参 3 ----- 可以传递</button>

        <button onClick={(e)=>{
            this.add(6,e)
        }}>事件传参 4 ----- 可以传递</button>


        {/* 
            定义事件：
            普通函数：
                需要手动的绑定 this,可以在 this 的后面进行参数的传递
                直接在事件监听的时候自己手动调用函数且传递参数
            箭头函数：
                如果直接调用传递参数，该函数只会在运行时执行，后期的点击无法执行  -- 所以无法传参
                直接在事件监听的时候自己手动调用函数且传递参数
        */}
      </div>
    )
  }
}
